<template>
  <div>
    <h1>订单详情</h1>
    <el-form
      v-if="orders[0].orderNo"
      ref="form"
      label-width="80px"
      style="width: 500px"
    >
      <el-form-item label="订单号">
        <span>{{ orders[0].orderNo }}</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="orders[0].createTime"></el-input>
      </el-form-item>
      <el-form-item label="收件人">
        <span>{{
          orders[0].receiverName +
          "," +
          orders[0].shippingVo.receiverCity +
          "," +
          orders[0].shippingVo.receiverProvince +
          "," +
          orders[0].shippingVo.receiverAddress
        }}</span>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-input v-model="orders[0].statusDesc"></el-input>
      </el-form-item>
      <el-form-item label="支付方式">
        <el-input v-model="orders[0].paymentTypeDesc"></el-input>
      </el-form-item>
      <el-form-item label="订单金额">
        <el-input v-model="orders[0].payment"></el-input>
      </el-form-item>
    </el-form>
    <!-- 商品详情 -->
    <template>
      <el-table :data="ordersa" style="width: 100%">
        <el-table-column prop="date" label="商品图片" width="180">
          <template slot-scope="scope">
              <el-image :src="'http://img.happymmall.com/'+scope.row.productImage"></el-image>
          </template>
          
        </el-table-column>
        <el-table-column prop="productName" label="商品信息" width="180">
        </el-table-column>
        <el-table-column prop="currentUnitPrice" label="单价"> </el-table-column>
        <el-table-column prop="quantity" label="数量"> </el-table-column>
        <el-table-column prop="totalPrice" label="合计"> </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { searchorder } from "../../../http/http";
export default {
  name: "",

  components: {},
  props: [],
  data() {
    return {
      id: 1,
      orders: [
        {
          orderNo: [],
          shippingVo: {
            receiverCity: [],
          },
        },
      ],
      ordersa:[]
    };
  },
  computed: {},
  watch: {},
  created() {
    this.id = this.$route.params.id;
    console.log(this.id);
  },
  mounted() {
    this.search();
  },
  methods: {
    // 订单详情
    // 查询订单
    async search() {
      const { data: res } = await searchorder(this.id);
      
      this.orders = res.data.list;
      this.ordersa = res.data.list[0].orderItemVoList
      console.log(res);
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
